<template>
	<view>
		<button @click="connect">连接 WebSocket</button>
		<button @click="sendMessage">发送消息</button>
		<button @click="close">关闭连接</button>
		<view v-for="item in message">{{ item }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				socketTask: null,
				message: []
			};
		},
		methods: {
			connect() {
				// 建立 WebSocket 连接
				this.socketTask = uni.connectSocket({
					url: 'ws://175.178.118.46:3000?restaurant_id=1341',
					success: () => {
						console.log('WebSocket 连接成功');
					},
					fail: (err) => {
						console.error('WebSocket 连接失败', err);
					}
				});

				// 监听连接成功事件
				this.socketTask.onOpen(() => {
					console.log('WebSocket 已打开');
				});

				// 监听接收到的消息
				this.socketTask.onMessage((res) => {
					this.message.push(res.data);
					console.log('收到消息:', res.data);
				});

				// 监听连接关闭事件
				this.socketTask.onClose(() => {
					console.log('WebSocket 已关闭');
				});

				// 监听连接错误事件
				this.socketTask.onError((err) => {
					console.error('WebSocket 连接错误', err);
				});
			},
			sendMessage() {
				if (this.socketTask) {
					// 发送消息
					this.socketTask.send({
						data: 'Hello, server!',
						success: () => {
							console.log('消息发送成功');
						},
						fail: (err) => {
							console.error('消息发送失败', err);
						}
					});
				}
			},
			close() {
				if (this.socketTask) {
					// 关闭 WebSocket 连接
					this.socketTask.close({
						success: () => {
							console.log('WebSocket 关闭成功');
						},
						fail: (err) => {
							console.error('WebSocket 关闭失败', err);
						}
					});
				}
			}
		}
	};
</script>